<template>
	<div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<basic-opt :has_left="true">
			<template #search>
				<div class="opt-item">
					<el-select v-model="apk_id" @change="apkIdChanged" filterable placeholder="请输入选择固件" size="medium">
						<el-option v-for="(item,index) in apk_id_list" :key="index" :label="item.name" :value="item.id">
							<span>id:{{ item.id }} - {{item.name}}</span>
						</el-option>
					</el-select>
				</div>
			</template>
			<template #add>
				<div class="opt-item" v-if="apk_id">
					<el-button @click="addForm" icon="el-icon-circle-plus-outline" type="primary" size="medium">
						添加固件版本</el-button>
				</div>
			</template>
		</basic-opt>

		<div class="table-box" v-if="apk_id">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="apk_id" label="apk_id"></el-table-column>
				<el-table-column prop="version" label="版本"></el-table-column>
				<el-table-column prop="href" label="版本链接" width="500"></el-table-column>
				<el-table-column prop="created_at" label="创建日期"></el-table-column>
				<el-table-column fixed="right" label="操作" width="400">
					<template #default="scope">
						<el-button @click="onReleaseVersion(scope.row)" type="primary" size="mini">发布
						</el-button>
						<!-- <el-button @click="copyVersionLink(scope.row)" type="success" plain size="mini">
							复制链接
						</el-button> -->
						<el-button @click="onDelData(scope.row)" type="danger" plain size="mini">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<page-component v-if="apk_id" @pageChanged="onPageChanged"></page-component>

		<!-- 添加固件版本 -->
		<compoment-drawer :drawer_name="drawer_name" :drawer_form="drawer_form" @getDrawerForm="getDrawerForm">
			<el-form ref="form" :model="form" label-width="120px">
				<el-scrollbar height="80vh" v-loading="form_loading" element-loading-text="正在进行请求,请稍后"
					element-loading-spinner="el-icon-loading">
					<div class="form-flex">
						<el-form-item label="版本号" prop="version">
							<el-input class="w-ipt" v-model="form.version" placeholder="请输入版本名称"></el-input>
						</el-form-item>
						<el-form-item label="版本描述" prop="desc">
							<el-input class="w-ipt" v-model="form.desc" type="textarea" placeholder="请输入版本描述">
							</el-input>
						</el-form-item>
						<el-form-item label="上传版本">
							<upload-version ref="uploadVersion" @getHref="getHref"></upload-version>
						</el-form-item>
						<el-form-item label="版本链接" prop="href">
							<el-input class="w-ipt" :disabled="true" rows="10" v-model="form.href" type="textarea"
								placeholder="此项版本上传完自动添加">
							</el-input>
						</el-form-item>
					</div>
				</el-scrollbar>
				<submit-reset @getChildNewForm="getNewForm" @getChildResetForm="resetForm('form')">
				</submit-reset>
			</el-form>
		</compoment-drawer>

		<!-- 发布版本 -->
		<compoment-drawer :drawer_name="drawer_fabu_name" :drawer_form="drawer_fabu_form"
			@getDrawerForm="getDrawerFabuForm">
			<el-form ref="release_form" :model="release_form" label-width="120px">
				<el-scrollbar height="80vh" v-loading="fabu_form_loading" element-loading-text="正在进行请求,请稍后"
					element-loading-spinner="el-icon-loading">
					<div class="form-flex">
						<el-form-item label="选择发布类型" prop="type">
							<el-select class="w-ipt" v-model="release_form.type" placeholder="请选择发布类型" filterable
								@change="releaseTypeChange">
								<el-option v-for="(item,index) in release_type_list" :key="index" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="是否升级固件" prop="is_firmware">
							<el-select class="w-ipt" v-model="release_form.is_firmware" placeholder="是否升级固件" size="medium">
								<el-option v-for="(item, index) in firmware_level_list" :label="item.name"
									:value="item.value" :key="index"></el-option>
							</el-select>
						</el-form-item>
						<div v-if="release_form.type == 2 || release_form.type == 3">
							<el-form-item label="选择项目">
								<project-component :project_id="project_id" @getProjectId="getProjectId">
								</project-component>
							</el-form-item>
						</div>
						<div v-if="(release_form.type == 2 || release_form.type == 3) && project_id != ''">
							<el-form-item label="选择地址(可多选)" prop="addresses">
								<address-component ref="childAddress" :project_id="project_id"
									:parent_addresses="release_form.addresses" @getAddresses="getAddresses">
								</address-component>
							</el-form-item>
						</div>
						<div v-if="release_form.type == 3 && release_form.addresses.length > 0">
							<el-form-item label="选择方向">
								<direction-component :direction_val="direction_val" @getDirectionId="getDirectionId">
								</direction-component>
							</el-form-item>
						</div>
						<div v-if="direction_val != ''">
							<el-form-item label="选择设备UUID" prop="uuid">
								<uuid3-component :direction_val="direction_val"
									:parent_addresses="release_form.addresses"
									:parent_uuid="release_form.uuid" @getUuidData="getUuidData"></uuid3-component>
							</el-form-item>
						</div>
					</div>
				</el-scrollbar>
				<submit-reset @getChildNewForm="getNewFabuForm" @getChildResetForm="getResetFubuForm('release_form')">
				</submit-reset>
			</el-form>
		</compoment-drawer>

		<!-- 删除数据确认 -->
		<delete-data :del_data_dialog="del_data_dialog" @getDelData="getDelData" @getCancelDelData="getCancelDelData">
			<el-descriptions class="margin-top" :column="1" size="medium" border>
				<el-descriptions-item>
					<template #label>
						id
					</template>
					{{delData.id}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						apk_id
					</template>
					{{delData.apk_id}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						版本
					</template>
					{{delData.version}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						版本链接
					</template>
					<el-input type="textarea" rows="3" v-model="delData.href"></el-input>
				</el-descriptions-item>
			</el-descriptions>
		</delete-data>
	</div>
	<!--  mobile  -->
	<div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求"
		element-loading-spinner="el-icon-loading">
		<div class="mobile-search-box">
			<el-select v-model="apk_id" @change="apkIdChanged" filterable placeholder="请输入选择固件" size="medium">
				<el-option v-for="(item,index) in apk_id_list" :key="index" :label="item.name" :value="item.id">
					<span>id:{{ item.id }} - {{item.name}}</span>
				</el-option>
			</el-select>
		</div>
		<div class="moblie-table-box" v-if="apk_id">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="apk_id" label="apk_id"></el-table-column>
				<el-table-column prop="version" label="版本"></el-table-column>
				<el-table-column prop="href" label="版本链接" width="500"></el-table-column>
				<el-table-column prop="created_at" label="创建日期"></el-table-column>
			</el-table>
		</div>
		<page-component v-if="apk_id" @pageChanged="onPageChanged"></page-component>
	</div>
</template>

<script>
	import API from '@/api/index.js'
	import mixin from '@/mixin.js'
	import ProjectComponent from '@/components/form/project-component.vue'
	import AddressComponent from '@/components/form/address-component.vue'
	import DirectionComponent from '@/components/form/direction-component.vue'
	import Uuid3Component from '@/components/form/uuid3-component.vue'
	import UploadVersion from '@/components/form/upload-version.vue'


	export default {
		mixins: [mixin],
		name: 'version',
		components: {
			ProjectComponent,
			AddressComponent,
			DirectionComponent,
			Uuid3Component,
			UploadVersion
		},
		data() {
			return {
				apk_id: '',
				apk_id_list: [],
				// 表单
				drawer_name: '添加固件版本',
				form_loading: false, // 表单填写时加载
				form: {
					apk_id: '',
					version: '',
					desc: '',
					href: ''
				},

				// 发布版本
				drawer_fabu_name: '发布版本', // 发布版本
				drawer_fabu_form: false,
				fabu_form_loading: false,
				release_form: {
					version_id: '',
					is_firmware: '',
					type: '', // 1 all 2 addresses 3 uuid
					addresses: [],
					uuid: []
				},
				firmware_level_list: [{
					value: '1',
					name: '升级'
				}, {
					value: '0',
					name: '不升级'
				}],
				release_type_list: [{
					value: 1,
					label: '全部设备'
				}, {
					value: 2,
					label: '按地址选择'
				}, {
					value: 3,
					label: '自定义'
				}], // 发布类型
				project_id: '',
				// 设备方向
				direction_val: '',

			}
		},
		mounted() {
			this.apk_id = localStorage.getItem('apk_id') ? Number(localStorage.getItem('apk_id')) : '';
			this.form.apk_id = localStorage.getItem('apk_id') ? Number(localStorage.getItem('apk_id')) : '';
			this.getApk();
			if (this.apk_id) {
				this.getData();
			}
			window.location.hash = "#/version?apk_id=" + this.apk_id;
		},
		methods: {
			getApk() {
				let self = this;
				self.apk_id_list = [];
				API.apks(1, 100).then(res => {
					self.apk_id_list = res.data.data;
				})
			},
			apkIdChanged(val) {
				let self = this;
				self.initData();
				localStorage.setItem('apk_id', val);
				self.$nextTick(function() {
					self.apk_id = val;
					self.form.apk_id = val;
					window.location.hash = "#/version?apk_id=" + val;
					self.getData();
				});
			},
			initData() {
				let self = this;
				self.apk_id = '';
				self.form.apk_id = '';
				localStorage.removeItem('apk_id');
			},
			async getData() {
				let self = this;
				self.loading = true;
				try {
					let params = {
						apk_id: self.apk_id ? self.apk_id : '0'
					}
					self.addPageInfo(params)
					let res = await API.apkVersions(params.pageNumber, params.pageSize, params.apk_id)
					self.loading = false;
					self.onGotPageData(res)
				} catch (err) {
					self.loading = false;
				}
			},
			// 确定删除数据
			submitDeleteData(val) {
				let self = this;
				API.delApkVersion(val).then(res => {
					console.log(res)
					self.getData();
					self.delSuccess();
				}).catch(err => {
					self.$message.error(err.response.data.message)
				});
			},
			// 获取上传的包文件
			getHref(data) {
				let self = this;
				self.form.href = data.href;
			},
			// 提交表单
			getNewForm() {
				let self = this;
				console.log(self.form.href)
				if (self.form.href) {
					self.form_loading = true;
					API.apkVersion(self.form).then(res => {
						console.log(res)
						self.submitSuccess();
						self.drawer_form = false;
						self.form_loading = false;
						self.getData();
						self.initForm();
					}).catch(err => {
						self.form_loading = false;
						self.$message.error(err.response.data.message);
					});
				} else {
					self.$notify.error({
						message: '请先上传包文件'
					});
				}
			},
			// 初始表单
			initForm() {
				let self = this;
				self.$refs.uploadVersion.resetUpload();
				self.form = {
					apk_id: localStorage.getItem('apk_id') ? Number(localStorage.getItem('apk_id')) : '',
					version: '',
					desc: '',
					href: ''
				};
			},

			// 发布版本
			onReleaseVersion(row) {
				let self = this;
				self.drawer_fabu_form = true;
				self.release_form.version_id = row.id;
			},
			getDrawerFabuForm(data) {
				let self = this;
				self.drawer_fabu_form = data.child_drawer_form;
				self.initFubuForm();
			},
			// 初始表单
			initFubuForm() {
				let self = this;
				self.release_form.is_firmware = '';
				self.release_form.type = '';
				self.project_id = '';
				self.direction_val = '';
				self.release_form.addresses = [];
				self.release_form.uuid = [];
			},
			// 选择发布类型
			releaseTypeChange(val) {
				let self = this;
				self.project_id = '';
				self.direction_val = '';
				self.release_form.addresses = [];
				self.release_form.uuid = [];
				switch (val) {
					case 1:
						self.release_form.type = 1;
						break;
					case 2:
						self.release_form.type = 2;
						break;
					case 3:
						self.release_form.type = 3;
				}
			},
			// 获取项目id
			getProjectId(data) {
				let self = this;
				self.project_id = data.child_project_id;
				// self.release_form.addresses = []; 
				self.direction_val = '';
				self.release_form.uuid = [];
			},
			// 地址组件项目id回传父组件,为了加载更多数据
			getAddressProjectId(data) {
				let self = this;
				self.project_id = data.project_id;
			},
			getAddresses(data) {
				let self = this;
				self.release_form.addresses = data.addresses;
				self.direction_val = '';
				self.release_form.uuid = [];
			},
			// 获取子组件方向id
			getDirectionId(data) {
				let self = this;
				self.direction_val = data.direction_val;
				self.release_form.uuid = [];
			},
			// 获取UUID
			getUuidData(data) {
				let self = this;
				self.release_form.uuid = data.uuidData;
			},

			// 提交
			getNewFabuForm() {
				let self = this;
				self.fubu_form_loading = true;
				API.publishApk(self.release_form).then(res => {
					console.log(res)
					self.submitSuccess();
					self.drawer_fabu_form = false;
					self.fubu_form_loading = false;
					self.getData();
					self.initFubuForm();
				}).catch(err => {
					self.fubu_form_loading = false;
					self.$message.error(err.response.data.message);
				});
			},
			getResetFubuForm(formName) {
				let self = this;
				self.$refs[formName].resetFields();
				self.initFubuForm();
			},
		},
		beforeUnmount() {
			localStorage.removeItem('apk_id');
		}
	}
</script>
